<template>
	<view>
		<!-- <picker :range="list" range-key="label" :value="selectedStoreIdx" @change="handleStoreChanged">
			<view class="shop-select uni-flex align-center">
				<image class="shop-select-ic-loc" src="/static/img/ic_dingwei_nav@2x.png" mode="widthFix"></image>
				<text class="uni-flex-extend shop-select-text uni-ellipsis">{{currShop.name || '未选择门店'}}</text>
				<image class="shop-select-ic-arrow" src="/static/img/ic_jiantou_nav@2x.png" mode="widthFix"></image>
			</view>
		</picker> -->
		<view @click="show = true" class="shop-select uni-flex align-center">
			<image class="shop-select-ic-loc" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_nav@2x.png" mode="widthFix"></image>
			<text class="uni-flex-extend shop-select-text uni-ellipsis">{{currShop.name || '未选择门店'}}</text>
			<image class="shop-select-ic-arrow" src="/static/img/ic_jiantou_nav@2x.png" mode="widthFix"></image>
		</view>
		<u-picker mode="selector" v-model="show"  :default-selector="[selectedStoreIdx]" range-key="label" :range="list" @confirm="handleStoreChanged"></u-picker>
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex"
	import {getAllStoreList} from "../../api/user.js"
	export default {
		data() {
			return {
				list: [],
				selectedStoreIdx: -1,
				show: false
			};
		},
		computed: {
			...mapState(["currShop"])
		},
		watch: {
			currShop(val) {
				if (val.id) {
					if (this.list.length) {
						for (var i = 0; i < this.list.length; i++) {
							let s = this.list[i];
							if (s.id == this.currShop.id) {
								this.selectedStoreIdx = i;
								break;
							}
						}
					}
				}
			}
		},
		mounted() {
			this.loadStoreList();
		},
		methods: {
			...mapMutations(["switchShop"]),
			showPicker() {
				this.show = true;
			},
			handleStoreChanged(e) {
				this.selectedStoreIdx = e[0];
				let store = this.list[e[0]];
				this.switchShop(store);
				this.$emit("change");
			},
			async loadStoreList() {
				var data = {};
				// #ifndef H5
				let [err, loc] = await uni.getLocation({
					type: "gcj02"
				})
        if (err) {
          loc = uni.getStorageSync('userLocation')
        }
        data.userLongitude = loc.longitude;
        data.userLatitude = loc.latitude;
				// #endif
				let list = await getAllStoreList(data);
				if (list) {
					list.forEach(item => {
						if (item.distance) {
							let label = this.formatDistance(item.distance);
							item.label = `${item.name} ${label}`;
						} else {
							item.label = item.name;
						}
					});
					this.list = list;
					if (this.list.length && !this.currShop.id) {
						this.selectedStoreIdx = 0;
						this.switchShop(this.list[0]);
						this.$emit("change");
					}
					if (this.list.length && this.currShop.id) {
						for (var i = 0; i < this.list.length; i++) {
							let s = this.list[i];
							if (s.id == this.currShop.id) {
								this.selectedStoreIdx = i;
								// this.$emit("change");
								break;
							}
						}
					}
				}
			},
			formatDistance(meters) {
				if (meters < 1000) {
					return `${meters}m`;
				} else {
					return `${Math.floor(meters / 1000)}km`;
				}
			}
		}
	}
</script>

<style lang="scss">
	.shop-select {
		color: #FFFFFF;
		background-color: rgba($color: #FEFEFE, $alpha: 0.3);
		padding: 8rpx 20rpx;
		border-radius: 40rpx;
		max-width: 400rpx;
		&-ic-loc {
			width: 30rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
		&-text {
			// width: 160rpx;
		}
		&-ic-arrow {
			margin-left: 8rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
